<template>
	<view class="bg">
		<view class="liao">
			<view class="left">
				<u-avatar :src="urls" size='60'></u-avatar>
			</view>
			<!-- <view class="right">
				<u-parse :content="content" :tagStyle="style"></u-parse>
			</view> -->
			<view class="send">
					{{content}}
				<view class="arrow"></view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		customer
	} from '@/api/messages'
	export default {
		data() {
			return {
				urls:'../../static/tabsIcon/kefu.jpg',
				content:null,
				style: {
					// 字符串的形式
					p: 'color: #fff;',
					span: 'color: #fff;',
					div: 'color: #fff;',
				}
			}
		},
		onLoad() {
			this.msg();
		},
		mounted(){
			
		},
		methods: {
			msg(){
				customer().then(res => {
					if(res.success == 1){
						this.content = res.data;
						console.log(this.content)
					}else{
						uni.showToast({
							title: res.data,
							icon:'none',
							duration: 2000
						});
					}	
				})
			},
		}
	}
</script>

<style>
.bg{
	height: 100vh;
	background-image: url(../../static/tabsIcon/customer.jpg);
	
}
.liao{
	padding-top: 40upx;
	width: 90%;
	margin: 0 auto;
	display: flex;
}
.left{
	width: 20%;
}
.right{
	background-color: #18BC37;
	width: 80%;
}

.send {
position:relative;
width:500upx;
/* height:35px; */
background:#F1F1F1;
border-radius:5px; /* 圆角 */
margin: 20upx auto 0;
padding: 20upx;
}

.send .arrow {
position:absolute;
top:5px;
left:-30upx; /* 圆角的位置需要细心调试哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color: transparent #F1F1F1 transparent transparent ;
}
</style>
